<!-- 财务数据维护 -->
<template>
    <div class='p-financialMaintenance'>
        <div class="app-container">
            <div class="list-wrapper">
                <div class="content">
                    <el-form class="submitForm" ref="submitForm" :model="submitForm" size="mini" label-width="150px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="请输入或选择项目编号">
                                    <el-select v-model="submitForm.selectValue" filterable placeholder="请选择">
                                        <el-option v-for="(item,index) in groupingList" :key="index" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :offset="10" :span="2">
                                <el-button type="primary" @click="submitBtn">提交</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="title">
                                    <span>硬件成本维护</span>
                                </div>
                                <el-form-item label="原材料未采购暂估">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="淘宝无票采购">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="制造部项目工时工工资">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="title">
                                    <span>人工成本维护</span>
                                </div>
                                <el-form-item label="内部人工暂估费用">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="调入研发费用的项目人工">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="title">
                                    <span>项目费用维护</span>
                                </div>
                                <el-form-item label="场地占用估费用">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="营业费用">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="title">
                        <span>项目成本总览</span>
                    </div>
                    <financial-search v-model="form" :searchFunc="searchFunc" :clear="clear" :entry="entry"></financial-search>
                    <comm-table ref="dragTable" :loading="loading" :data="tableData" style="width: 100%">
                        <el-table-column width="50" type="selection" />
                        <el-table-column prop="code" label="项目编号" width="70" />
                        <el-table-column prop="money" label="原材料未采购暂估" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.money"></el-input>
                                <span v-else>{{scope.row.money}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="codename" label="淘宝无票采购" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.codename"></el-input>
                                <span v-else>{{scope.row.codename}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="peoplename" label="项目工时工资" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.peoplename"></el-input>
                                <span v-else>{{scope.row.peoplename}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="zname" label="内部人工暂估" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.zname"></el-input>
                                <span v-else>{{scope.row.zname}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="creatdata" label="调入研发费用的项目人工" width="105">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.creatdata"></el-input>
                                <span v-else>{{scope.row.creatdata}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ramk" label="场地占用费" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.ramk"></el-input>
                                <span v-else>{{scope.row.ramk}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="datas" label="营业费用" width="90">
                            <template slot-scope="scope">
                                <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.datas"></el-input>
                                <span v-else>{{scope.row.datas}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="data" label="硬件成本合计" width="90" />
                        <el-table-column prop="data" label="人工成本合计" width="90" />
                        <el-table-column prop="data" label="项目费用合计" width="90" />
                        <el-table-column prop="data" label="填写人员" width="90" />
                        <el-table-column prop="data" label="填写时间" width="105" />
                        <el-table-column prop="data" label="操作时间" width="90" />
                        <el-table-column label="操作" width="90">
                            <template slot-scope="scope">
                                <span class="operation-btn" @click="goEdit(scope.row.id)">编辑</span><br/>
                                <span class="operation-btn" @click="goSave(scope.row)">保存</span><br/>
                            </template>
                        </el-table-column>
                    </comm-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import financialSearch from '../modules/financial-search'
    import TableCommMixin from '@/mixins/TableCommMixin'
    export default {
        name: 'projectCost',
        mixins: [TableCommMixin],
        components: { financialSearch },
        data() {
            return {
                submitForm:{},  //提交数据
                form:{},        //搜索数组
                groupingList:[],//下拉数据
                userId:'',      //行内修改赋值ID
                tableData:[
                    {id:1,code:'123',money:'345',codename:'12311',peoplename:'123123',zname:'3434',creatdata:'3344',ramk:'213',datas:'12121',data:'12121'},
                    {id:2,code:'123',money:'345',codename:'12311',peoplename:'123123',zname:'3434',creatdata:'3344',ramk:'213',datas:'12121',data:'12121'},
                    {id:3,code:'123',money:'345',codename:'12311',peoplename:'123123',zname:'3434',creatdata:'3344',ramk:'213',datas:'12121',data:'12121'},
                ]
            }
        },
        methods: {
            //搜索事件
            searchFunc() {
                // 查询触发函数，通过bus唤起getList。Author by clj. on 2020.4.18
                console.log(99)
            },
            //清空事件
            clear() {
                console.log(88)
            },
            //导出
            entry() {

            },
            //行内编辑
            goEdit(id) {
                this.userId = id;
            },
            //行内保存
            goSave(data) {
                console.log(data)
            },
            //提交
            submitBtn() {

            }
        },
        mounted() {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-financialMaintenance {
        .submitForm {
            padding: 21px 21px 0;
            .el-form-item__label {
                font-size: 12px;
            }
            .title {
                width: 100%!important;
                margin-bottom: 10px!important;
            }
        }
    }
</style>
